<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <style>
    ul {
      list-style: none;
    }
  </style>
  <body>
    <ul>
      <li>全选<input type="checkbox" id="all" /></li>
      <li>Java<input type="checkbox" class="item" /></li>
      <li>javaScript<input type="checkbox" class="item" /></li>
      <li>C++<input type="checkbox" class="item" /></li>
      <li>python<input type="checkbox" class="item" /></li>
      <li>.net<input type="checkbox" class="item" /></li>
    </ul>

    <script>
      // 补全代码
      var all = document.querySelector('#all')
      var lis = document.querySelectorAll('.item')
      // 监听全选按钮的变化
      all.onchange = (e) => {
        lis.forEach((item) => {
          item.checked = e.target.checked
        })
      }
      // 监听其他复选框的变化
      lis.forEach((item) => {
        item.onchange = (e) => {
          lis.forEach((item) => {
            if (item.checked !== true) {
              all.checked = false
            } else {
              all.checked = true
            }
          })
        }
      })
    </script>
  </body>
</html>
